<template>
  <div class="position-salary-change-container">
    <div class="header-actions">
      <router-link to="/main/renshi/jixiao/xzyidong" class="back-link">返回</router-link>
    </div>
    <h2 class="page-title">职位/薪资异动申请表列表</h2>
    <div class="search-bar">
      <el-input v-model="searchForm.employeeNo" placeholder="工号" style="width: 200px; margin-right: 10px;"
        class="search-input" />
      <el-input v-model="searchForm.employeeName" placeholder="姓名" style="width: 200px; margin-right: 10px;"
        class="search-input" />
      <el-input v-model="searchForm.originalDepartment" placeholder="原部门" style="width: 200px; margin-right: 10px;"
        class="search-input" />
      <el-input v-model="searchForm.newDepartment" placeholder="新部门" style="width: 200px; margin-right: 10px;"
        class="search-input" />
      <el-select v-model="searchForm.changeType" placeholder="变更类型" clearable style="width: 200px; margin-right: 10px;"
        class="search-select" @change="handleChangeTypeChange">
        <el-option label="正式任用" value="formalHire" />
        <el-option label="终止劳动" value="terminateLabor" />
        <el-option label="延长试用" value="extendProbation" />
        <el-option label="变更职务" value="changePosition" />
        <el-option label="变更薪资" value="changeSalary" />
        <el-option label="其他" value="other" />
      </el-select>
      <el-input v-if="searchForm.changeType === 'other'" v-model="searchForm.otherChangeDesc" placeholder="请输入变更类型"
        style="width: 200px; margin-right: 10px;" class="search-input" />
      <el-date-picker v-model="searchForm.dateRange" type="daterange" range-separator="至" start-placeholder="申请开始日期"
        end-placeholder="申请结束日期" style="width: 350px; margin-right: 10px;" value-format="yyyy-MM-dd"
        class="search-datepicker" />
      <el-button type="primary" @click="handleSearch" class="search-button">搜索</el-button>
      <el-button @click="resetSearch" class="reset-button">重置</el-button>
      <el-button type="primary" @click="handleAdd" class="add-button">新增申请</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%" class="data-table">
      <el-table-column prop="employeeNo" label="工号" width="100" class="table-column" />
      <el-table-column prop="employeeName" label="姓名" width="100" class="table-column" />
      <el-table-column prop="originalDepartment" label="原部门" width="120" class="table-column" />
      <el-table-column prop="originalPosition" label="原职位" width="120" class="table-column" />
      <el-table-column prop="newDepartment" label="新部门" width="120" class="table-column" />
      <el-table-column prop="newPosition" label="新职位" width="120" class="table-column" />
      <el-table-column label="变更类型" width="300" class="table-column">
        <template v-slot="scope">
          <template v-if="scope.row.changeType === 'formalHire'">
            <el-tag size="small" class="tag-style">正式任用</el-tag>
          </template>
          <template v-else-if="scope.row.changeType === 'terminateLabor'">
            <el-tag type="danger" size="small" class="tag-style">终止劳动</el-tag>
          </template>
          <template v-else-if="scope.row.changeType === 'extendProbation'">
            <el-tag type="warning" size="small" class="tag-style">延长试用</el-tag>
          </template>
          <template v-else-if="scope.row.changeType === 'changePosition'">
            <el-tag type="success" size="small" class="tag-style">变更职务</el-tag>
          </template>
          <template v-else-if="scope.row.changeType === 'changeSalary'">
            <el-tag type="info" size="small" class="tag-style">变更薪资</el-tag>
          </template>
          <template v-else>
            <el-tag type="info" size="small" class="tag-style">{{ scope.row.changeType }}</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="applyDate" label="申请日期" width="120" class="table-column">
        <template v-slot="scope">
          {{ formatDate(scope.row.applyDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="effectiveDate" label="生效日期" width="120" class="table-column">
        <template v-slot="scope">
          {{ formatDate(scope.row.effectiveDate) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250" fixed="right" class="table-column">
        <template v-slot="scope">
          <el-button size="small" @click="handleView(scope.row)" class="action-button">查看</el-button>
          <el-button size="small" type="primary" @click="handleEdit(scope.row)" class="action-button">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)" class="action-button">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background layout="prev, pager, next" :total="total" :current-page.sync="currentPage"
        :page-size="pageSize" @current-change="handleCurrentChange" class="pagination" />
    </div>
  </div>
</template>

<script>
import { getPositionSalaryChangeList, deletePositionSalaryChange } from '@/api/positionSalaryChange'
import { Message, MessageBox } from 'element-ui'

export default {
  data() {
    return {
      searchForm: {
        employeeNo: '',
        employeeName: '',
        originalDepartment: '',
        newDepartment: '',
        changeType: '',
        otherChangeDesc: '',
        dateRange: []
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    formatDate(date) {
      if (!date) return ''
      const dateObj = new Date(date)
      return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')}`
    },
    handleChangeTypeChange(value) {
      if (value !== 'other') {
        this.searchForm.otherChangeDesc = ''
      }
    },
    async fetchData() {
      try {
        const params = {
          current: this.currentPage,
          size: this.pageSize,
          employeeNo: this.searchForm.employeeNo,
          employeeName: this.searchForm.employeeName,
          originalDepartment: this.searchForm.originalDepartment,
          newDepartment: this.searchForm.newDepartment,
          changeType: this.searchForm.changeType === 'other' ? this.searchForm.otherChangeDesc : this.searchForm.changeType,
          otherChangeDesc: this.searchForm.otherChangeDesc
        }

        if (this.searchForm.dateRange && this.searchForm.dateRange.length === 2) {
          params.startDate = this.searchForm.dateRange[0]
          params.endDate = this.searchForm.dateRange[1]
        }

        const response = await getPositionSalaryChangeList(params)
        if (response && response.data) {
          this.tableData = response.data.records || []
          this.total = response.data.total || 0
        } else {
          this.tableData = []
          this.total = 0
          Message.warning('获取数据为空')
        }
      } catch (error) {
        console.error('获取列表失败：', error)
        Message.error(error?.message || '获取列表失败')
        this.tableData = []
        this.total = 0
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    handleAdd() {
      this.$router.push('/main/renshi/jixiao/xzyidong')
    },
    handleView(row) {
      this.$router.push(`/main/renshi/jixiao/xzyidong?id=${row.id}&mode=view`)
    },
    handleEdit(row) {
      this.$router.push(`/main/renshi/jixiao/xzyidong?id=${row.id}`)
    },
    async handleDelete(row) {
      try {
        await MessageBox.confirm('确认删除该记录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        const response = await deletePositionSalaryChange(row.id)
        if (response && response.code === 200) {
          Message.success('删除成功')
          this.fetchData()
        } else {
          Message.success(response?.message || '删除成功')
          this.fetchData()
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除失败：', error)
          Message.error(error?.message || '删除失败')
        }
      }
    },
    handleSearch() {
      this.currentPage = 1
      this.fetchData()
    },
    resetSearch() {
      this.searchForm = {
        employeeNo: '',
        employeeName: '',
        originalDepartment: '',
        newDepartment: '',
        changeType: '',
        otherChangeDesc: '',
        dateRange: []
      }
      this.handleSearch()
    }
  }
}
</script>

<style scoped>
/* 全局使用宋体字体 */
* {
  font-family: '宋体', sans-serif;
}

.position-salary-change-container {
  padding: 40px;
  max-width: 1200px;
  min-height: calc(100vh - 80px);
  margin: 0 auto;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.header-actions {
  display: flex;
}

.back-link {
  text-decoration: none;
  color: #1890ff;
  padding: 8px 15px;
  border: 1px solid #1890ff;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
  position: relative;
}

.back-link:hover {
  background-color: #1890ff;
  color: white;
}

.add-button {
  padding: 8px 15px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.page-title {
  font-size: 1.2em;
  color: #333;
  margin-bottom: 20px;
  text-align: center;

}

.search-bar {
  margin: 20px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.search-input,
.search-select,
.search-datepicker {
  padding: 8px;
  /* border: 1px solid #ccc; */
  border-radius: 5px;
}

.search-button,
.reset-button {
  padding: 8px 15px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.search-button {
  background-color: #1890ff;
  color: white;
}

.search-button:hover {
  background-color: #40a9ff;
}

.reset-button {
  background-color: #f0f0f0;
  color: #333;
}

.reset-button:hover {
  background-color: #e0e0e0;
}

.data-table {
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 20px;
}

.table-column {
  text-align: center;
}

.tag-style {
  display: inline-block;
  margin-right: 5px;
}

.action-button {
  margin-right: 5px;
  transition: background-color 0.3s ease;
}

.action-button:hover {
  filter: brightness(0.9);
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
}

.pagination {
  display: inline-block;
}
</style>